<template>
	<view>
		<uniCard title="快速搜索" is-full>
			<input type="text" placeholder="输入乘客姓名" v-model="quickInfo.passageName" value="" />
			<view class="select_frame">
				<picker @change="bindPickerChange" :value="quickInfo.passageStatus" :range="options">
					<label class="">{{ options[quickInfo.passageStatus] }}</label>
				</picker>
			</view>
			<view class="quickBtnArea">
				<button type="primary"><uni-icons type="search" size="14" color="#fff"></uni-icons>搜索</button>
			</view>
		</uniCard>
		<uniCard v-for='(item,j) in searchList' :key='j' class="searchList" is-full>
			状态：{{item.status}}<br />
			姓名：{{item.name}}<br />
			证件号：{{item.IDNum}}<br />
			<button type="primary" class="searchDetailBtn" size="mini">详情</button>
		</uniCard>
	</view>
</template>

<script>
import uniCard from '@/components/uni-card/uni-card.vue';
export default {
	data() {
		return {
			quickInfo: {
				passageName: '',
				passageStatus: 0
			},
			options: ['已审批', '未审批', '已拒绝'],
			searchList:[
				{name:'陈**',
				status:'待审批',
				IDNum:'340101****0529'},{name:'陈**',
				status:'待审批',
				IDNum:'340101****0529'},{name:'陈**',
				status:'待审批',
				IDNum:'340101****0529'},{name:'陈**',
				status:'待审批',
				IDNum:'340101****0529'},
			]
		};
	},
	methods: {
		bindPickerChange: function(e) {
			console.log(e);
			this.quickInfo.passageStatus = e.target.value; //取其下标
			var selected = this.options[this.quickInfo.passageStatus]; //获取选中的数组
		}
	},
	components: {
		uniCard
	}
};
</script>

<style lang="scss">
input {
	font-size: 14px;
	border-radius: 4px;
	border: 1px solid #cccccc;
	height: 40px;
	box-sizing: border-box;
	padding: 4px 10px;
}
.select_frame {
	margin: 12px 0;
	font-size: 14px;
	border-radius: 4px;
	border: 1px solid #cccccc;
	height: 40px;
	width: 100%;
	box-sizing: border-box;
	padding-left: 4px;
	line-height: 40px;
	.uni-label-pointer {
		line-height: 40px !important;
	}
}
.quickBtnArea {
	text-align: center;
	uni-button {
		width: 82px;
		height: 32px;
		line-height: 32px;
		font-size: 14px;
	}
}

</style>
